WebUI是网络产品界面设计（Website User Interface）的意思，设计范围包括常见的网站设计（如电商网站、社交网站）、网络软件设计（如邮箱、Saas产品）等。WUI设计与常见网站建设 的区别是，WUI注重人与网站的互动和体验，以人为中心进行设计，而传统的网站建设是以功能为中心进行设计，随着用户对网站体验的日渐挑剔，网站建设的思想逐渐被淘汰。故学WUI是网站设计的未来趋势。

Web 1.0的UI技术

在HTML规范发展的过程中，以HTML标签为基础来构建的页面一直是Web UI的主流技术。

1.1.1 纯文本网页

1989年，英国人Tim Berners Lee发明了www（World Wide Web），万维网诞生。通过www，分散在网络上各处的资源可以相互访问。最开始的网页没有UI的概念，只包含纯文本的数据和跳转的超链接。

1.1.2 静态HTML页面

随着越来越多的数据被放置到了互联网上，纯文本的HTML已经不能满足人们的期望。Marc Andreessen在1993年引入了图片。随后，字体、背景、框架和一些特效（marquee、blink）等元素相继被引入了HTML中。

1993年6月，互联网工程工作小组 （IETF，Internet Engineering Task Force）发布了HTML草案；1995年11月，提出了HTML2.0规范。

此时的web UI已经具有较强的静态展示能力，丰富多彩的展示效果，被越来越多的人所接受。Web UI技术逐渐形成。

1.1.3 Web UI的成熟期

1996年是HTML发展的一个里程碑，JavaScript和叠样式表（CSS，Cascading Style Sheets）相继诞生，W3c（World Wide Web Consorium）制定的HTML3.2规范出炉。

此时的web UI可以在展现后，与用户的操作交互，根据用户的行为方便地修改UI元素和调整样式，从而实现动态的DHTML页面。至此，传统的HTML Web UI技术发展到成熟期。后来的发展中，HTML标准没再有大的改动。

从这个时期开始，一般的web站点或是web应用系统的实现都是从界面设计人员使用Photoshop或是Dreamweaver等工具设计出效果图或是界面原型开始。此时的内容还都是所谓的静态页面，无法根据不同的外部条件展示不同的内容。

1.1.4 服务器端技术

随 后，CGI、ASP(Active Server Page)、JSP(Java Server Pages)、PHP(Personal home page Hypertext Preprocessor)等服务器端脚本技术相继涌现，真正的动态页面出现了。服务器端代码分析用户提交的请求参数，从数据库服务器获取相应的业务数 据，动态地将网页和数据组合拼装出网页的HTML文本输出到客户端浏览器。

此时的服务器端页面不再是一个单纯的UI模型，而只是一个服务器端脚本引擎来处理生成客户端UI模型的模板，其中包括HTML片段、脚本块和标签等元素。比如Struts、Tapestry和WebWork等基于JavaEE技术的web框架就是此类技术的集大成者。

随 着web开发技术的进一步发展，又出现服务器端UI组件技术。例如asp中的服务器端UI组件和JSP中的JSF组件。其使用服务器端脚本技术， 封装部分HTML、JavaScript和CSS片段构建一个完整的UI组件模型，在运行期间解释并与数据进行整合，最终输出为实际的HTML代码。

Web 2.0的UI技术

Web2.0 是2003年之后互联网的热门概念之一，不过对什么是Web2.0并没有很严格的定义。一般来说Web2.0是相对Web1.0的新的一代互联网技术 的统称。Web1.0的主要特点在于用户通过浏览器获取信息，Web2.0则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。

但业务系统与商业网站有着巨大的区别，业务系统主要使用web2.0来改善用户体验，而极少关注博客（BLOG）、百科全书(Wiki)、社会网络（SNS）等用户互动和参与技术。

1.2.1 Ajax进入21世纪后，Ajax（Asynchronous JavaScript And Xml）技术的崛起绝对是互联网应用的一个划时代的变革。简单地说，Ajax就是为浏览器提供了在不提交整个页面的情况下动态的与服务器简单交互的能力。 这样，就可以通过使用JavaScript脚本来提交数据和刷新或是渲染页面中的某些部分，此后人们就不必在页面提交和显示之间的空白状态等待，web应 用的用户体验得到巨大增强。

Ajax技术通过在JavaScript语言环境中使用XmlHttpRequest对象与服务器端数据和业务交互，并从UI界面获取用户输入和将服务器端处理结果通过UI界面展现出来。

主流的客户端Ajax框架有：Jquery，Dojo，MooTools，Prototype等等。服务器端的Ajax框架有DWR，Buffalo，Ajax4jsf等等。

1.2.2 基于JavaScript的UI技术

基于JavaScript的UI技术的出现，将web UI的控制权从界面设计人员递交给了程序员，即可以直接在web的前端使用JavaScript脚本来描述一个UI组件模型，然后在运行时，由浏览器的脚 本解释器调用核心的UI技术框架来将其转换成HTML的UI界面。

此类UI技术框架跟服务器端UI技术的思路一致，只是在客户端浏览器中 封装了一套UI模型。这样界面设计不需要服务器端的支持，在开发期间能更好的展示和测试界面效果。同时由于UI界面的构建和控制都在客户端，只需要和服务 器端传递请求参数和数据，这样就能比服务器端UI技术大大的降低服务器端的压力和网络数据的传递量。

此类技术有Ext JS，Yahoo UI，qooxdoo等等。其中Ext JS框架比较完善并且易用的。

Ext JS最初是一个基于YUI(Yahoo！UI)的扩展，已经完全独立。Ext JS是最好的纯JavaScript UI展示框架，其提供了一整套的基于JavaScript和CSS的组件体系，以及整合了许多web UI的其他功能。

随着web技术和网络应用的发展、CPU处理器和浏览器能力的提高，人们对于web程序的期望值也越来越高，希望把越来越多的桌面程序的特性和能力移 植到了web系统来实现，（与客户端操作系统和软硬件交互，操作二进制数据，访问网络，渲染图形等等），纯文本的HTML已经不能满足要求。于是各大厂商 纷纷推出自己的解决方案，典型的技术有Microsoft的ActiveX技术、Sun的Applet技术和Macromedia的Flash技术等。

由于以上开发技术都很专业，需要较强的技术水平和人力投入，因此往往只用于解决特定技术问题（如文件断点续传、单据套打等），不可能将整个业务系统完全基于上述技术来实现。

随 着ActiveX等桌面应用元素融入到web系统中，web UI的开发技术进入了多元化时代。但是ActiveX的安全性和开发维护的技术门槛一直被人们所诟病。Flash在相对长的一段时间内被作为美工们点缀网 站和美化界面的技巧性工具。Applet也因为种种原因也淡出人们的视野。然而伴随着Ajax技术给web UI带来的惊喜，越来越多内容丰富、效果绚丽的页面涌现出来，人们对于良好用户体验的UI界面的期待越来越高。在这种背景下，RIA（Rich Internet Applications，富互联网应用）技术出现，它们在提供强大UI构建和展现功能的同时，也提供了安全性保证、面向开发人员的模式和易用性、方便简 单的一致性部署方式等等。RIA概念深入人心。

1.4.1 Flex

Adobe Flex是最初由Macromedia公司在2004年3月发布的，基于其专有的Macromedia Flash平台，它是涵盖了支持RIA的开发和部署的一系列技术组合。Flex的目标是让程序员更快更简单地开发RIA应用。Flex SDK使用基于XML的MXML语言，提供多种常用的组件，可实现Web Services，远程对象，drag and drop，列排序，图表等功能；FLEX内建动画效果和其它简单互动界面等。

1.4.2 Silverlight

2007年9月5日，Microsoft Silverlight1.0正式版发布。Microsoft Silverlight是一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验的RIA程序。　Silverlight提供了强大的开发、运行平台和设计工具，能够开发出具有专业图形、音频和视频的Web应用程序。：

1.4.3 JavaFx

2008年底的SunOne大会上，Sun发布了JavaFx 1.0正式版本，旨在基于jvm环境和通过函数式编程的JavaFx脚本来简化RIA开发。JavaFx技术具有可以直接调用Java API的能力，可以调用java第三方类库，方便地与j2ee系统集成和交互。